<template>
    <a-badge :color="color" :text="text" />
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, watch, getCurrentInstance } from 'vue';
export default defineComponent({
    name: 'HBadgeStatus',
    props: {
        status: {
            type: String,
            default: ''
        },
        type: {
            type: String,
            default: 'task'
        }
    },
    // versionStatus
    setup(props) {
        const instance: any = getCurrentInstance();
        const state = reactive({
            color: '#B3B6BB',
            text: ''
        });
        const statusColors = {
            task: { '1': '#B3B6BB', '1.1': '#25A15F', '1.2': '#FB7555', '2': '#0176d3', '3': '#25A15F', '4': '#F279AB', '5': '#5D7092', '6': '#DB1C0B', '7': '#FB7555', '8': '#DB1C0B' },
            version: {
                '1': '#B3B6BB',
                '2': '#0176d3',
                '3': '#25A15F',
                '4': '#FB7555',
                '5': '#DB1C0B'
            }
        };
        const statusTypes = {
            task: 'status',
            version: 'versionStatus'
        };
        const getColor = () => {
            return statusColors[props.type][props.status];
        };
        const getText = () => {
            return instance.proxy.$filters.valToNameFilter(statusTypes[props.type], props.status);
        };
        const init = () => {
            state.color = getColor();
            state.text = getText();
        };
        watch(() => props.status, init, {
            immediate: true
        });
        return {
            ...toRefs(state)
        };
    }
});
</script>